<template>
  <div v-loading="loading" class="limited-time-offers-main">
    <el-collapse-transition>
      <div v-show="!isShowForm">
        <div class="head-container">
          <div class="flex-x-start-center">
            <!--<div class="title">秒杀</div>-->
            <StoreListSelect style="margin-right: 20px" @emitStore="handleStore" />
            <el-button type="primary" round size="small" @click="handleActivityForm('add')">
              新建{{ activityTypeOptions[activityType] }}活动
            </el-button>
          </div>
          <div class="tab-container">
            <el-tabs v-model="filterForm.status" @tab-click="handleTab">
              <el-tab-pane label="进行中" name="1" />
              <el-tab-pane label="未开始" name="0" />
              <el-tab-pane label="已终止" name="2" />
              <el-tab-pane label="已过期" name="3" />
            </el-tabs>
          </div>
        </div>
        <!-- 内容 start -->
        <div class="content-container ">
          <el-empty v-if="!storeInfo" description="请先选择门店" />

          <div v-else>
            <div class="filter-container">
              <el-form ref="filterForm" :model="filterForm" inline label-width="100px" size="small">
                <!--<div>-->
                <el-form-item label="商品类型：" prop="goodsType">
                  <el-select v-model="filterForm.goodsType" placeholder="请选择">
                    <el-option label="全部" value="all" />
                    <template v-for="(item,key) in goodsTypeOptions[activityType]">
                      <el-option :key="key" :label="item" :value="key" />
                    </template>
                  </el-select>
                </el-form-item>
                <el-form-item prop="goodsName" label="商品名称：">
                  <el-input v-model="filterForm.goodsName" />
                </el-form-item>
                <el-form-item label="国际条码：" prop="barCode">
                  <el-input v-model="filterForm.barCode" />
                </el-form-item>
                <el-form-item label="商品编码：" prop="goodsNo">
                  <el-input v-model="filterForm.goodsNo" />
                </el-form-item>
                <el-form-item prop="name" label="活动名称：">
                  <el-input v-model="filterForm.name" />
                </el-form-item>
                <el-form-item prop="serialNo" label="活动批次：">
                  <el-input v-model="filterForm.serialNo" />
                </el-form-item>
                <!--</div>-->
                <div>
                  <el-form-item label=" ">
                    <el-button type="primary" round @click="submitFilterForm">查询</el-button>
                    <el-button round @click="resetFilterForm">重置</el-button>
                  </el-form-item>
                </div>
              </el-form>
            </div>
            <!-- 表格内容 -->
            <div class="table-container">
              <el-table
                :data="list"
                border
                stripe
                style="width: 100%"
                size="small"
                empty-text="暂无数据"
              >
                <el-table-column prop="goodsTitle" label="商品" width="250px">
                  <template slot-scope="scope">
                    <div class="flex-x-start-center goods-column">
                      <el-image :src="fileBaseUrl+scope.row.goodsCover" fit="contain" class="cover-img" />
                      <div>
                        <div class="app-line-two  bold">{{ scope.row.goodsTitle }}</div>
                        <div class="app-line-two">{{ scope.row.categoryNames.join('/') }}</div>
                      </div>
                    </div>
                    <!--<div class="bold font-14">{{ scope.row.name }}</div>-->
                    <!--<div>活动批次：{{ scope.row.serialNo }}</div>-->
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="活动名称">
                  <template slot-scope="scope">
                    <div class="bold font-14">{{ scope.row.name }}</div>
                    <div>活动批次：{{ scope.row.serialNo }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="theme" :label="activityType == 'SEC_KILL' ? '秒杀时间':'拼团时间'" width="210px">
                  <template slot-scope="scope">
                    <div class="bold font-14">{{ scope.row.beginTime }} 至 {{ scope.row.endTime }}</div>
                    <div v-for="(v,i) in scope.row.periodTimes" :key="'periodTimes_'+i">
                      {{ v.beginTime|mm2HHmm }} ~ {{ v.endTime|mm2HHmm }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="bookingNum" label="预约数" v-if="activityType == 'SEC_KILL'">
                  <template slot-scope="scope">
                    <div class="bold font-14">{{ scope.row.bookingNum }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="orderNum" label="订单数">
                  <template slot-scope="scope">
                    <div class="bold font-14">{{ scope.row.orderNum }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="goodsNum" label="商品数">
                  <template slot-scope="scope">
                    <div class="bold font-14">{{ scope.row.goodsNum }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.expired" size="small" type="info">已过期</el-tag>
                    <el-tag v-else-if="scope.row.status===0" size="small">未开始</el-tag>
                    <el-tag v-else-if="scope.row.status===1" size="small" type="success">进行中</el-tag>
                    <el-tag v-else-if="scope.row.status===2" size="small" type="danger">已终止</el-tag>
                  </template>
                </el-table-column>
                <!--<el-table-column prop="theme" label="秒杀时间"/>-->
                <!--<el-table-column label="活动时间" width="150">-->
                <!--  <template slot-scope="scope">-->
                <!--    <div>开始时间：{{ scope.row.startTime }}</div>-->
                <!--    <div>结束时间：{{ scope.row.endTime }}</div>-->
                <!--  </template>-->
                <!--</el-table-column>-->
                <el-table-column label="操作" fixed="right" width="210">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleActivityForm('detail',scope.row)">详情</el-button>
                    <el-button v-if="!scope.row.expired&&(scope.row.status===0||scope.row.status===1)" type="text" size="small" @click="handleActivityForm('edit',scope.row)">
                      编辑
                    </el-button>
                    <el-button v-if="!scope.row.expired&&scope.row.status===0" type="text" size="small" @click="handleChangeStatus(scope.row,1)">
                      启用
                    </el-button>
                    <el-button v-if="!scope.row.expired&&scope.row.status===1" type="text" size="small" class="app-text-color-danger" @click="handleChangeStatus(scope.row,0)">
                      暂停
                    </el-button>
                    <el-button v-if="!scope.row.expired&&(scope.row.status===0||scope.row.status===1)" type="text" size="small" class="app-text-color-danger" @click="handleChangeStatus(scope.row,2)">
                      终止
                    </el-button>
                    <el-button type="text" size="small" @click="jumpOrderManage(scope.row)">订单</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页 -->
              <pagination-direction
                v-if="paginationConfig.total!==0"
                :config="paginationConfig"
                @sizeschange="fetchData"
                @pagechange="fetchData"
              />
            </div>
          </div>

        </div>
      </div>
    </el-collapse-transition>

    <!-- 效果详情 -->
    <el-collapse-transition>
      <ActivityForm v-if="isShowForm" ref="activityForm" :activity-type="activityType" :store-info="storeInfo" />
    </el-collapse-transition>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ActivityForm from './ActivityForm'
import StoreListSelect from '../../components/StoreListSelect'
import { activityList, changeActivityStatus } from '@/views/wxaMallModule/api/activity'

export default {
  components: {
    ActivityForm,
    StoreListSelect
  },
  props: {
    activityType: {
      type: String,
      required: true,
      default: 'SEC_KILL'
    }
  },
  data() {
    return {
      // 分页
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      // 配置
      activityTypeOptions: {
        SEC_KILL: '秒杀',
        GROUP: '拼团'
      },
      statusOptions: {
        0: '未开始',
        1: '进行中',
        2: '已终止'
      },
      goodsTypeOptions: {
        SEC_KILL: {
          100: '实物商品',
          200: '卡/券包'
        },
        GROUP: {
          100: '实物商品',
          200: '卡/券包'
        }
      },
      goodsTypes: [100, 200],
      // 状态
      loading: false,
      isShowForm: false,
      // 数据
      storeInfo: null,
      list: [], // 表格数据
      filterForm: {
        goodsType: null,
        barCode: null,
        goodsNo: null,
        expired: true,
        goodsName: null,
        goodsSerial: null,
        name: null,
        serialNo: null,
        status: '1',
        storeId: null
      }
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  mounted() {
    // this.fetchData(1)
  },
  methods: {
    /**
     *  获取数据
     */

    // 获取列表
    fetchData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 加入page
      let params = Object.assign({}, this.filterForm)
      params.pageNum = page
      params.pageSize = pageSize
      // 过期
      if (params.status === '3') {
        params.expired = true
        delete params.status
      } else {
        params.expired = false
      }
      params.type = this.activityType
      // 清除多余字段
      if (params.goodsType === 'all' || !params.goodsType) {
        params.goodsTypes = []
      } else {
        params.goodsTypes = [params.goodsType]
      }
      params = this.$clearFilterFormFields(params)
      this.loading = true
      activityList(params)
        .then(res => {
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .finally(() => {
          this.loading = false
        })
    },

    /**
     * 按钮组
     */
    // 选择门店
    handleStore(val) {
      this.storeInfo = val
      this.filterForm.storeId = val.storeId
      this.fetchData(1)
    },

    // 更改tab
    handleTab(tab, event) {
      this.fetchData(1)
    },

    // 查询
    submitFilterForm() {
      this.fetchData(1)
    },

    // 重置
    resetFilterForm() {
      this.$refs.filterForm.resetFields()
    },

    // 新增 编辑
    handleActivityForm(mode, row = null) {
      const serialNo = row && row.serialNo || null
      if (mode === 'edit' && row && row.status === 1) {
        this.$message.error('请先暂停活动后进行编辑')
        return
      }
      this.isShowForm = true
      this.$nextTick(() => {
        this.$refs.activityForm.open(mode, serialNo).then((res) => {
          this.fetchData()
          this.isShowForm = false
        })
      })
    },

    // 暂停
    handleChangeStatus(row, status) {
      const params = {
        serialNo: row.serialNo,
        status: status
      }
      const statusOptions = {
        0: '暂停',
        1: '启动',
        2: '终止'
      }
      this.$confirm(`您确认要${statusOptions[status]}活动【${row.name}】${status === 2 ? '（活动一旦终止不可重新启动）' : ''}?`, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        roundButton: true
      }).then(() => {
        this.loading = true
        changeActivityStatus(params).then(() => {
          this.fetchData()
          this.$notify({
            title: '成功',
            message: statusOptions[status] + '成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {
      })
    },

    // 打开订单
    jumpOrderManage(row) {
      const newUrl = this.$router.resolve({ name: 'WxaMallOrderManage', query: { activityNo: row.serialNo, subType: row.type } })
      window.open(newUrl.href, '_blank')
    }

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.limited-time-offers-main {
  /*head*/
  .head-container {
    padding: 20px 20px 0;
    border-radius: 6px;
    background-color: #fff;

    .title {
      font-size: 20px;
      font-weight: bold;
      margin-right: 20px;
    }
  }

  /* tab */
  ::v-deep {
    .el-tabs__header {
      margin-bottom: 0;
      background-color: #fff;
      border-radius: 0 0 5px 5px;
    }

    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }

    .el-tabs__active-bar {
      height: 4px;
    }
  }

  /*内容*/
  .content-container {
    margin-top: 10px;
    padding: 20px;
    border-radius: 6px;
    background-color: #fff;

    .goods-column {
      .cover-img {
        margin-right: 10px;
        flex: 0 0 50px;
        height: 50px;
        border: 1px solid #e7e7e7;
      }
    }

    .bold {
      font-weight: bold;
      color: #000;
    }

    .font-14 {
      font-size: 14px;
    }

    .font-16 {
      font-size: 16px;
    }
  }
}
</style>
